<template>
  <div class="my_guess" id="my_guess" ref="my_guess" :class="{'my_guess_ny':skinType==6}">
    <div class="guess_banner" :class="{'guess_banner_new_year':skinType==6}">
      <div class="guess_reward guess_reward_new_year">
        <div>
			<div class="title">
				已领奖品
			</div>
			<div class="content">
				<div @click="filterReward('package')">
					<!-- <div class="reward_title bounceInRight">中奖金额</div> -->
					<div class="reward_title">{{mineReward.cash }}  </div>
					<div class="reward_tips">红包</div>
				</div>
				<div v-if="mineReward.prize_num>0" @click="filterReward('prize')">
					<!-- <div class="reward_title bounceInRight">实物</div> -->
					<div class="reward_title">{{ mineReward.prize_num }} </div>
					<div class="reward_tips">实物</div>
				</div>
			</div>
		</div>
        <div class="reward_out" @click="jumpQFH5Wallet(mineReward.url)">提现</div>
      </div>
      <div class="guess_reward_bottom">
        <image class="guess_reward_bottom_img" :src="bottomImg" :mode="'scaleToFill'"></image>
      </div>
	  <div class="shareImg" @click="openModal">
		  <img src="@/static/sports/share_myguess.png" alt=""/>
	  </div>
    </div>
    <div class="guess_list">
      <div class="guess_tab" :class="{'guess_tab_ny':skinType==6}">
        <div class="tab_one" :class="{'tab_one_choosed':1== listType && skinType==null,'tab_one_choosed_ny':1== listType && skinType==6}" @click="changeListType(1)">中奖明细({{totalCount}})</div>
        <div class="tab_one" :class="{'tab_one_choosed':2== listType && skinType==null,'tab_one_choosed_ny':2== listType && skinType==6}" @click="changeListType(2)">竞猜记录</div>
      </div>
      <div class="guess_record_list" v-if="0 == sportsList.length && !loading">
        <noResult :text="'暂无数据'"></noResult>
      </div>

      <div class="guess_record_list" id="record_list">
		  
        <div class="guess_record_one" v-for="item in sportsList" v-if="1 == listType">
			<div>
				<div class="record_one_header" :class="{'record_one_header_ny':skinType==6}">
				  <div class="header_title">{{ item.title }}</div>
				  <div class="header_result">我的竞猜：{{ item.option.team.name }}{{ item.option.name }}</div>
				</div>
				<div class="record_one_resulut_detail">
				    <div class="detail_info">
				    <div class="title_one">竞猜时间：{{ item.created_at_show }}</div>
				    <div class="title_one" v-if="item.reward_status == 0">红包有效至：时间不限</div>
				    <div class="title_one" v-if="item.reward_status != 0">请于{{ item.reward_during_show  }}内领取</div>
				    </div>
				    <div class="detail_reward_info">
				        <div class="detail_reward" v-if="item.status == 1">{{ item.cash!=0?'+'+item.cash+'元':item.prize.title}}</div>
				        <div class="detail_button button_win" v-if="item.status == 0 && (item.reward_status == 1 || item.reward_status==0 )" @click="goReward(item.id,item.cash,item.envelopes,item)">领红包</div>
				<!--              <div class="detail_button button_show" v-if="item.status == 1 && isApp" @click="showOff">炫耀一下</div>-->
				        <div class="detail_button button_lose" v-if="(item.status == 0 && item.reward_status == 2) || item.status==2">已过期</div>
						<div class="detail_button button_win" v-if="(item.status == 9 && item.cash == 0)" style="background: #FF523B;" @click="openPrizeInfo(item)">去核销</div>
				    </div>
				</div>
			</div>
		<!-- 	<div v-if="item.cash==0">
				<button @click="openPrizeInfo(item)">(实物奖)打开详情页</button>
			</div> -->
          
        </div>
        <div class="guess_record_one" v-for="item in sportsList" v-if="2 == listType">
          <div class="record_one_header" :class="{'record_one_header_ny':skinType==6}">
            <div class="header_title">{{ item.title }}</div>
            <div class="header_result">比赛结果：
              <span>{{ item.win_text }}</span>
            </div>
            <div class="record_status status_start" v-if="item.award_status == 0">未开奖</div>
            <div class="record_status status_lose" v-if="item.award_status == 1 && item.if_win == 0">未猜中</div>
            <div class="record_status status_win" v-if="item.award_status == 1 && item.if_win == 1">猜中了</div>
          </div>
          <div class="record_one_detail" :class="{'record_one_detail_ny':skinType==6}">
            <div class="detail_title">
              <div class="title_one left">竞猜项</div>
              <div class="title_one center">竞猜卡</div>
              <div class="title_one right">竞猜时间</div>
            </div>
            <div class="detail_content">
              <div class="detail_content_one" :class="{'detail_one_win':'1' == itemRec.win}" v-for="itemRec in item.ret_record">
                <div class="detail_one left">{{ itemRec.team_name }}{{ itemRec.name }}</div>
                <div class="detail_one center">{{ itemRec.num }}</div>
                <div class="detail_one right">{{ itemRec.time_show }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <redPackage v-if="showPackage" :red_cover="red_cover" @getPackage="getPackage" @hideRed="hideRed"></redPackage>
    <redPackageModal @cancel="cancel" @getReward="getReward" v-if="showRedModal"></redPackageModal>
    <guide></guide>
	<qrcode v-if="link!=null"  :text="link" @getLink="setLink"></qrcode>
	<div class="modal" v-if="modal" @touchmove.stop.prevent="moveHandle" @click="closeModal">
    <div class="modal_inner" @click.stop="hideModals($event)">
      <div class="pla"></div>
      <img v-if="canvasImg!=''" :src="canvasImg" />

      <div class="no_image" v-else></div>
      <div class="text">长按保存图片</div>
      <!-- 		<img :src="linkImage" alt="" style="width:200rpx;height: 200rpx;"/> -->
      <vue-canvas-poster v-if="startCanvas" :widthPixels="1000" :painting="painting" @success="success" @fail="fail"></vue-canvas-poster>
    </div>
	</div>
  </div>
</template>

<script>
import {mineSportsRecord , mineWinning , getReward , guessSportsInfo , guessSportsText} from "@/api/api";
import {timeStampToString} from '@/until/tool'
import noResult from "../../../components/worldGuess/noResult";
import redPackage from "@/components/redPackage/redPackage";
import redPackageModal from "@/components/redPackageModal/redPackageModal";
import {isWeiXin,isQianfan,newJumpUrl,proxyShareFun,checkPlatform,LoginApp,checkLogin,checkLoginBefore,countNum} from '@/until/QFH5.js'
import {mapGetters} from "vuex";
import html2canvas from "html2canvas";
import qrcode from '@/components/yz-qr/yz-qr.vue'
import {VueCanvasPoster} from 'vue-canvas-poster'
export default {
  name: "myGuess",
  computed:{
	  ...mapGetters(['skinType'])
  },
  data(){
    return{
      listType:1,
      actid:0,
      sportsList:[],
      loading:true,
      mineReward:{
		  prize_num:0
	  },
	  raceData:{},
      isApp:false,
      fromWx:false,
      showPackage:false,
      packageId:-1,
      red_cover:'',
      showRedModal:false,
      red_bac:'',
      /*分页参数*/
      page:1,
      isEnd:false,
      totalCount:0,
      /*奖品类别*/
      prize_type:0,
	  bottomImg:require('@/static/sports/my_guess_bottom.png'),
	  isInit:true,
	  
	  modal:false,
	  screenImage:null,
	  link:'',
	  linkImage:null,
	  canvasImg:null,
	  painting:null,
	  startCanvas:false
    }
  },
  components:{  noResult, redPackage,  redPackageModal, qrcode,VueCanvasPoster  },
  methods:{
	openModal(){
		this.canvasImg=''
		uni.showLoading({
			title:'加载中'
		})
		this.toImage()
		this.modal = true
	},
  moveHandle(){

  },
  hideModals(event){
    event.stopPropagation()
  },
	closeModal(){
	  this.modal = false
	},
	//生成链接二维码
	setLink(val){
		// console.log('link',val)
		this.linkImage = val
	},
	//调用拼图
	success(src) {
		uni.hideLoading()
	  this.canvasImg = src
	  this.$nextTick(()=>{
		  this.startCanvas =false
	  })
	},
	fail(err) {
		this.$nextTick(()=>{
				  this.startCanvas =false
		})
	  console.log('fail', err)
	},
	//屏幕截图
	toImage () {
	    const canvas = document.createElement("canvas")
	    let canvasBox = this.$refs.my_guess
	    const width = parseInt(window.getComputedStyle(canvasBox).width)
	    const height = parseInt(window.getComputedStyle(canvasBox).height)
		let _this = this
		uni.getSystemInfo({
			success(res) {
				let pix = res.windowWidth/750
				html2canvas(canvasBox,{height:1180*pix}).then((canvas) => {
				    let dataURL = canvas.toDataURL("image/png")
					_this.screenImage = dataURL
					_this.setPainting(pix)
				})
				
			}
		})
	            // 宽高 * 2 并放大 2 倍 是为了防止图片模糊
	},
	setPainting(pix){
		this.painting={
			width: '750px',
			height: '1448px',
			background:'linear-gradient(45deg, #FCCA80 0%,'+this.raceData.settings.bgcolor+'  100%)',
			views: [
			  {
			    type: 'text',
			    text: '扫码识别，立即参与活动一起玩，中大奖！',
			    css: {
			      bottom:'80px',
			      left: '22px',
			      width: '460px',
			      color: "#fff",
			      fontSize: '40px',
			      fontWeight:'bold',
			      lineHeight: '48px',
			      textAlign: 'left',
			      maxLines: 2,
			    }
			  },
			  {
			    type: 'image',
			    url: this.linkImage,
			    css: {
			      bottom: '30px',
			      right: '26px',
			      width: '200px',
			      height: '200px',
			    }
			  },
			  {
			    type: 'image',
			    url: this.screenImage,
			    css: {
			  		top:'0px',
			        left: '1px',
			  			width:'750px',
			  		height: '1180px',
			  		mode: 'scaleToFill',
			    }
			  },
			]
		}
		this.startCanvas = true
	},
	openPrizeInfo(val){
		if(isWeiXin()){
		  this.showRedModal = true
		  return
		}
		let url = '/plugin/pages/sports/packageInfo?pid='+val.id
		this.$navigateTo({url:url})
	},
    async initBefore(){
	  console.log('111111')
      this.sportsList = []
      this.page = 1
      this.isEnd = false
      // console.info(this.actid)
      let res = await guessSportsInfo({actid: this.actid})
	  this.raceData = res.data
	  
	  // console.log('11111',res.data)
      uni.setStorageSync('actid', this.actid)
      uni.setStorageSync('platform',JSON.stringify(res.data.settings.platform))
	  
	  this.$store.dispatch('serviceInfo',res.data.settings)
	  
      if(await checkLoginBefore()){
        // console.info(this.listType)
        this.initData(this.listType)
      }

    },
    changeListType(type){
      this.sportsList = []
      this.page = 1
      this.listType = type
      this.initData(type)
    },
    filterReward(type){
      if(type == 'package'){
        if(this.prize_type == 2){
          this.prize_type = 0
        }else{
          this.prize_type = 2
        }
      }
      if(type == 'prize'){
        if(this.prize_type == 1){
          this.prize_type = 0
        }else{
          this.prize_type = 1
        }
      }
      this.sportsList = []
      this.page = 1
      this.initData(this.listType)
    },
    initData(type){
      // console.info(type)
      this.loading = true
      uni.showLoading({  title: '加载中'  });
	   console.log('2222')
      if(2 == type){
        this.sportsList = []
        let data = {  actid:this.actid, }
        mineSportsRecord(data).then(res=>{
          uni.hideLoading()
          this.sportsList =res.data.result
          this.loading = false
          this.sportsList.forEach(item=>{
            let optionList = item.sport_options
            let teamList = item.teams
            item.ret_record.forEach(itemRec=>{
              optionList.forEach(itemOp=>{
                if( Number(itemRec.option_id) == itemOp.id){
                  itemRec.name = itemOp.name
                  itemRec.team_id = itemOp.team_id
                  itemRec.race_id = itemOp.race_id
                  teamList.forEach(itemTeam=>{
                    if( itemOp.team_id == itemTeam.id){
                      itemRec.team_name = itemTeam.name
                    }
                  })
                }
              })
            })
          })
          this.sportsList.forEach(item=>{
            item.if_win = 0
            if(item.award_option == 0){
              item.win_text = '未开奖'
            }else{
              let optionList = item.sport_options
              let teamList = item.teams
              optionList.forEach(itemOp=>{
                if( item.award_option == itemOp.id){
                    let teamId = itemOp.team_id
                    if(teamList.length==0){
                      item.win_text = itemOp.name
                    }else{
                      teamList.forEach(itemTeam=>{
                        if( teamId == itemTeam.id){
                          item.win_text = itemTeam.name + itemOp.name +''
                        }
                      })
                    }
                }
              })
              item.ret_record.forEach(itemRec=>{
                let set = {  showHour: false,  showMin: false, showSec: false, showWeek: false }
                itemRec.time_show = timeStampToString(itemRec.created_at, set)
                // console.info(itemRec.time_show)
              })
            }
            item.ret_record.forEach(itemRec=>{
              if(Number(itemRec.win) == 1){
                item.if_win = 1
              }
              let set = {  showHour: false,  showMin: false,  showSec: false,  showWeek: false  }
              itemRec.time_show = timeStampToString(itemRec.created_at, set)
              // console.info(itemRec.time_show)
            })
          })
          // console.info(this.sportsList)
		  this.isInit = true
        })
      }
      if(1 == type){
        let data = { actid:this.actid,  page:this.page,  perPage:20,prize:this.prize_type  }
        mineWinning(data).then(res=>{
          uni.hideLoading()
          /*this.sportsList= res.data.result*/
          res.data.rewards.cash = res.data.rewards.cash.toFixed(2)
          this.mineReward = res.data.rewards
          this.sportsList = [...this.sportsList, ...res.data.result]
          // console.info(this.sportsList)
          this.totalCount = res._page.totalCount
          if(res.data.result.length >= 20){
            if(this.page < res._page.totalPage){
              this.page = this.page+1
              this.isEnd = false
            }else{
              this.isEnd = true
            }
          }else{
            this.isEnd = true
          }
          this.loading = false
          this.sportsList.forEach(item=>{
            let set = { showHour: true,  showMin: true,  showSec: false,  showWeek: false }
            if(item.reward_during != 0){
              if(item.reward_during > parseInt(new Date().getTime()/1000)){
                item.reward_status = 1
              }else{
                item.reward_status = 2
              }
              item.reward_during_show = timeStampToString(item.reward_during, set)
            }else{
              item.reward_status = 0
            }
            item.created_at_show = timeStampToString(item.created_at, set)
            // console.info(item.created_at_show)
          })
          // console.info(this.sportsList)
		  this.isInit = true
        })
      }
    },
    jumpQFH5Wallet(url){
      if(isQianfan()){
        QFH5.jumpNewWebview(url)
      }
      let _this = this
      if(isWeiXin()){
        _this.showRedModal = true
        /*uni.showModal({
          title: '',
          content: '即将打开千帆APP',
          confirmText:'前去领取',
          success: function (res) {
            if (res.confirm) {
              let loactionUrl = ''
              /!* let loactionHost = window.location.host
               alert(window.location.host)
               let protocal = window.location.protocol
               loactionUrl = protocal + '//' + loactionHost +"/plugin-view/plugin/pages/sports/myGuess?id="+_this.actid
               alert(loactionUrl)
               let param = encodeURIComponent(loactionUrl)
               alert(param)*!/

              loactionUrl = window.location.href +'?id='+_this.actid
              let param = encodeURIComponent(loactionUrl)
              let url = newJumpUrl(0,param)
              window.location.href = url
            } else if (res.cancel) {

            }
          }
        });*/
      }

    },
    /*领红包，场景判断*/
    goReward(id,cash,red_bac_list,data){
	  uni.setStorageSync('__prize',data)
      let index = 0

      this.res_cash = cash
	  
	  
      if(red_bac_list.length == 0){
        this.red_bac = ''
        this.red_cover = ''
      }else if(red_bac_list.length == 1){
        this.red_cover = red_bac_list[0].image
        this.red_bac = red_bac_list[0].background
      }else if(red_bac_list.length > 1){
        index = (Math.floor(Math.random() * (red_bac_list.length - 0) ) + 0)
        this.red_cover = red_bac_list[index].image
        this.red_bac = red_bac_list[index].background
      }
      // console.info(this.red_bac)

	  // this.showPackage = true
	  // this.packageId = id
	  // return

      if(isQianfan()){
        this.showPackage = true
        this.packageId = id
      }
      let _this = this
      if(isWeiXin()){
        _this.showRedModal = true
        /*uni.showModal({
          title: '',
          content: '即将打开千帆APP',
          confirmText:'前去领取',
          success: function (res) {
            if (res.confirm) {

            } else if (res.cancel) {

            }
          }
        });*/
      }
    },
    /*wx场景，去领取*/
    getReward(){
      this.showRedModal = false
      let loactionUrl = ''
      /*let loactionHost = window.location.host
      let protocal = window.location.protocol*/

      loactionUrl = window.location.href
      let param = encodeURIComponent(loactionUrl)
      let url = newJumpUrl(0,param)
      window.location.href = url
    },
    getPackage(){
      this.showPackage = false
      let data = {
        rid:this.packageId,
        actid:this.actid
      }
      getReward(data).then(res=>{
        // console.info(res)

        if(0 == res.code){
		  
          uni.navigateTo({
            url: "/plugin/pages/sports/packageView?res_cash="+this.res_cash+'&red_bac='+this.red_bac,
          });
          /*uni.showToast({ title:'领取成功', icon:'none' })
          this.initData(this.listType)*/
        }else{
          uni.showToast({ title:res.text, icon:'none' })
        }
      })
    },
    hideRed(){
      this.showPackage = false
    },
    shareCallback(){
      // console.info("555555555555555555")
      QFH5.openShareDialog();
    },

    showOff(){
      let newUrl = window.location.protocol+'//'+ window.location.host+'/plugin-view/?type=guess&plugin=sports&id='+this.actid
      // console.info(newUrl)
      let shareImg = uni.getStorageSync('shareImg')
      if(''==shareImg){
        shareImg = uni.getStorageSync('image')
      }
      // console.info(shareImg)
      // console.info(newUrl)
      if(isQianfan()){
		  proxyShareFun('快和我一起来赢取红包大礼吧！',
            shareImg,
            '世界杯竞猜',
            newUrl,
            null,
            this.shareCallback())
        // shareFun( '快和我一起来赢取红包大礼吧！',
        //     shareImg,
        //     '世界杯竞猜',
        //     newUrl,
        //     null,
        //     this.shareCallback())
        /*QFH5.setShareInfo(
           ,
            shareImg,
            '世界杯竞猜',
            newUrl,
            'shareCallback'
        )*/
        /*setShare('快和我一起来赢取红包大礼吧！',shareImg,'世界杯竞猜',newUrl,(state,data)=>{
          //回调是所有分享操作的回调，无论从右上角菜单发起或openShareDialog或openShare发起，分享完后一定执行此回调
          console.log('分享back',data,state)
          if(state==1){
            //分享成功
            QFH5.openShareDialog();
          }else{
            //分享失败
          }
        })*/

      }

    },
    /*清空确认框*/
    cancel(){
      this.showRedModal = false
    }
  },
  mounted() {
    /*this.initData(this.listType)
    if(isQianfan()){
      this.isApp = true
    }*/
	  // console.log('-----------------',this.skinType)
    /*app打开先登录*/
    if(this.skinType==6){
      this.bottomImg = require('@/static/sports/my_guess_bottom_new_year.png')
    }
	
	this.link = window.location.origin+'/plugin-view/?type=guess&plugin=sports&id='+this.actid
	// setTimeout(()=>{
	// 	if(this.screenImage==null){
	// 		this.toImage()
	// 	}
		
	// },10000)
	//仍然会导致重复加载 部分手机
	// if(this.isInit){
	// 	this.isInit = false
	// 	if(isQianfan()){
	// 	  this.isApp = true
	// 	}
	// 	this.initBefore()
	// 	console.log('4444')
	// }
	
  },
  onShow(){
	if(this.isInit){
		this.isInit = false
		if(isQianfan()){
		  this.isApp = true
		}
		
		this.initBefore()
		this.$nextTick(()=>{
			uni.getSystemInfo({
				success(res) {
					if(res.platform=='ios'){
						console.log('执行窗口滚动----强制拉伸')
						window.onpageshow = function(event) {
						       if (event.persisted) {
						          location.reload()
						       }
						};
						console.log('---------')
			
					}
				}
			})
		})
		
		console.log('3333')
	}

  },
  onLoad(op){
    // console.info(op.id)
    this.actid = op.id
    this.$store.commit('SETACTIVITYNAME','sports')
    this.page = 1
    this.sportsList = []
    console.info(this.actid)
    countNum(this.actid)
  },
  onReachBottom(){
    // console.info(this.isEnd)
    // console.info(this.page)
    if(!this.isEnd && 1==this.listType){
      this.initData(this.listType)
    }
    // console.info("bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb")
  },
}
</script>

<style scoped lang="scss">
	
.modal{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9;
	background-color: rgba(0, 0, 0, .7);
	text-align: center;
	line-height: 0;
  .modal_inner{
    position: relative;
    z-index: 10;
    width:500rpx;
    height: auto;
    margin: 10vh auto 0;
    overflow: hidden;
    .pla{
      height: 1rpx;
    }
    img{
      // margin-top: 0rpx;
      width:500rpx;
      height: auto;
      max-height: 80vh;
    }
    .no_image{
      width:500rpx;
      height: 964rpx;
      background: rgba(255,255,255,0.3);
    }
    .text{
      padding-top: 30rpx;
      width: 100%;
      text-align: center;
      font-size: 30rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 40px;
    }
  }

}
.shareImg{
	position: absolute;
	top: -8rpx;
	right: 24rpx;
	z-index: 9;
	width: 88rpx;
	height:88rpx;
	line-height: 0;
	img{
		width: 88rpx;
		height:88rpx;
	}
}
	
@import "~@/common/common.scss";
.my_guess_ny{
	background:#FA342F !important;
}
.my_guess{
  // position: absolute;
  // left: 0;
  // top: 0;
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding: 0 0 50rpx 0;
  overflow: hidden;
  box-sizing: border-box;
  background: rgba(255, 249, 238, 1);
  
  .guess_banner{
    width: 100%;
    height: 450rpx;

    background: url("~@/static/sports/my_guess_banner.png");
    background-size: 100% 100%;
    overflow: hidden;
    position: relative;
    .guess_reward{
      width: 670rpx;
      height: 350rpx;
      margin: 50rpx auto 30rpx auto;
      background: url("~@/static/sports/my_guess_reward.png");
      background-size: 100% 100%;
      box-sizing: border-box;
      position: relative;
      z-index: 6;
	  display: flex;
	  flex-direction: row;
	  justify-content: center;
	  // align-items: center;
	  &>div{
		  display: flex;
		  flex-direction: column;
		  justify-content: flex-start;
		  align-items: center;
		  
		  .title{
			  height: 50rpx;
			  line-height: 50rpx;
			  font-size: 36rpx;
			  font-family: PingFang SC-Regular, PingFang SC;
			  font-weight: 400;
			  color: #222222;
			  margin-top: 51rpx;
			  // border: 1rpx solid #000;
			  
		  }
		  .content{
		  		display: flex;
		  		flex-direction: row;
				justify-content: center;
		  		align-items: center;
		  		margin-top: 14rpx;
				width: 690rpx;
				div{
					width: 260rpx;
					text-align: center;
				}
		  }
		  
	  }
	  
      .reward_title{
		  height: 56rpx;
		  font-size: 56rpx;
		  font-family: PingFang SC-Heavy, PingFang SC;
		  font-weight: 800;
		  color: #F3393B;
		  line-height: 56rpx;
      }
      .reward_num{
		  // height: 56rpx;
		  // line-height: 56rpx;
    //     font-size: 56rpx;
    //     font-weight: 800;
    //     color: #F3393B;
    //     letter-spacing: 6rpx;
    //     .unit{
    //       padding: 0 0 0 6rpx;
    //       font-size: 30rpx;
    //       font-family: PingFang SC-Heavy, PingFang SC;
    //       font-weight: 800;
    //       color: #F3393B;
    //       line-height: 46px;
    //     }
      }
      .reward_out{
        width: 134rpx;
        height: 60rpx;
        line-height: 60rpx;
        background: #FC7703;
        opacity: 1;
        border-radius: 30rpx 0 0 30rpx;
        position: absolute;
        text-align: center;
        top: 70rpx;
        right: 60rpx;
        font-size: 30rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
      }
      .reward_tips{
        // margin: 40rpx 0 0rpx 0;
        // font-size: 24rpx;
        // font-family: PingFang SC-Regular, PingFang SC;
        // font-weight: 400;
        // color: #FFFFFF;
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #F3393B;
		line-height: 46rpx;
		margin-top: 0rpx;
      }
    }
    .guess_reward_new_year{
		background: url("~@/static/sports/my_guess_reward_new_year.png");
		background-size: 100% 100%;
		 height: 365rpx;
		// border: 1RPX solid black;
		// background-size: cover;
		.guess_reward{
			margin: 46rpx auto 30rpx auto;
		}
		.reward_out{
			top: 46rpx;
		}
	}
	.guess_reward_bottom{
      width: 100%;
      height: 270rpx;
      position: absolute;
      left: 0;
      bottom: -156rpx;
      z-index: 5;
      .guess_reward_bottom_img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .guess_banner_new_year{
  	   background: url("~@/static/sports/my_guess_banner_new_year.png");
	   background-size: 100% 100%;
  }
  .guess_list{
    width: 100%;
    margin: 10rpx 0 0 0;
    overflow: hidden;
    .guess_tab{
      margin: 46rpx 0 0 0;
      display: flex;
      align-items: center;
      justify-content: center;
      .tab_one{
        min-width: 128rpx;
        height: 60rpx;
        font-size: 32rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #222222;
        line-height: 60rpx;
        padding: 0 30rpx;
        border-right: 1rpx solid #D9D9D9;
      }
      .tab_one:last-child{
        border: 0;
      }
      .tab_one_choosed{
        color: rgba(39, 118, 249, 1);
      }
    }
    .guess_tab_ny{
		.tab_one{
			color: #FFFFFF ;
			&:first-child{
				border-right: none;
			}
		}
		.tab_one_choosed_ny{
			position: relative;
			&::after{
				position: absolute;
				left: 50%;
				bottom: 0rpx;
				content: "";
				width: 100rpx;
				// height: 3rpx;
				// background-color: #fff;
				border-bottom: 3rpx solid #fff;
				transform: translateX(-50%);
			}
		}
	}
	.guess_record_list{
      margin: 46rpx 0 0 0;
      padding:0 0 50rpx 0;
	  min-height: 100vh;
      .guess_record_one{
        margin: 0 28rpx 30rpx 28rpx;
		.record_one_header_ny{
			background: linear-gradient(88deg, #FCCA80 0%, #FFFFFF 100%)!important;
		}
        .record_one_header{
          width: 694rpx;
          min-height: 130rpx;
          background: linear-gradient(88deg, #D1E2FF 0%, rgba(255,255,255,0) 100%);
          border-radius: 15rpx 15rpx 0px 0px;
          opacity: 1;
          padding: 16rpx 30rpx;
          box-sizing: border-box;
          position: relative;
          .header_title{
            max-height: 90rpx;
            font-size: 32rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: bold;
            color: #222222;
            line-height: 45rpx;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
          .header_result{
            height: 42rpx;
            font-size: 30rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #222222;
            line-height: 48rpx;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
          .record_status{
            position: absolute;
            width: 162rpx;
            height: 64rpx;
            border-radius: 0rpx 15rpx 0rpx 58rpx;
            opacity: 1;
            top: 0;
            right: 0;
            font-size: 30rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 64rpx;
            padding: 0 0 0 50rpx;
            box-sizing: border-box;
          }
          .status_start{
            background: linear-gradient(90deg, #D9DEFF 0%, #9D92FC 100%);
          }
          .status_win{
            background: linear-gradient(90deg, #FFD9D9 0%, #FE73AB 100%);
          }
          .status_lose{
            background: linear-gradient(90deg, #D9E0EC 0%, #7D809B 100%);
          }
        }
		.record_one_detail_ny{
			background-color: #FFF7EC!important;
		}
        .record_one_detail{
          width: 694rpx;
          padding: 20rpx 0rpx;
          background: #FFFFFF;
          box-shadow: 0px 3px 20px 1px rgba(102,102,102,0.1);
          border-radius: 0px 0px 15rpx 15rpx;
          .detail_title{
            display: flex;
            justify-content: space-between;
            .title_one{
              height: 42rpx;
              font-size: 28rpx;
              font-family: PingFang SC-Regular, PingFang SC;
              font-weight: 400;
              color: #666666;
              flex: 1;
              display: flex;
              align-items: center;
              &:first-child{
                margin-left: 30rpx;
              }
              &:last-child{
                margin-right: 30rpx;
              }
            }
          }
          .detail_info{
            display: flex;
            flex-direction: column;
            justify-content: left;
            .title_one{
              height: 42rpx;
              font-size: 30rpx;
              font-family: PingFang SC-Regular, PingFang SC;
              font-weight: 400;
              color: #666666;
              flex: 1;
              display: flex;
              align-items: center;
              
            }
          }
          .detail_content{
            .detail_content_one{
              display: flex;
              justify-content: space-between;
              .detail_one{
                min-height: 42rpx;
                font-size: 30rpx;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(34, 34, 34, 1);
                line-height: 48rpx;
                flex: 1;
                &:first-child{
                margin-left: 30rpx;
              }
              &:last-child{
                margin-right: 30rpx;
              }
              }
            }
            .detail_one_win{
              .detail_one{
                color: #FF3D4D !important;
              }

            }
          }
          .left{
            text-align: left;
          }
          .center{
            text-align: center;
            justify-content: center;
          }
          .right{
            text-align: right;
            justify-content: flex-end;
          }
        }
        .record_one_resulut_detail{
          width: 694rpx;
          padding: 20rpx 0rpx;
          background: #FFFFFF;
          box-shadow: 0px 3px 20px 1px rgba(102,102,102,0.1);
          border-radius: 0px 0px 15rpx 15rpx;
          display: flex;
          justify-content: space-between;
          .detail_info{
            display: flex;
            flex-direction: column;
            justify-content: start;
            margin-left: 30rpx;
            .title_one{
              height: 42rpx;
              font-size: 30rpx;
              font-family: PingFang SC-Regular, PingFang SC;
              font-weight: 400;
              color: #222222;
              flex: 1;
              display: flex;
              align-items: center;
            }
          }
          .detail_reward_info{
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 30rpx;
            .detail_reward{
              font-size: 32rpx;
              font-family: PingFang SC-Bold, PingFang SC;
              font-weight: bold;
              color: #FF3D4D;
              line-height: 48rpx;
            }
            .detail_button{
              width: 200rpx;
              height: 80rpx;
              opacity: 1;
              font-size: 32rpx;
              font-family: PingFang SC-Bold, PingFang SC;
              font-weight: bold;
              line-height: 80rpx;
              text-align: center;
            }
            .button_win{
              background: #FF3D4D;
              border-radius: 40rpx;
              color: #FFFFFF;
            }
            .button_show{
              background: #2776F9;
              border-radius: 40rpx;
              color: #FFFFFF;
            }
            .button_lose{
              background: none;
              border:none;
              color: #666666;
              width: 100rpx;
            }
          }

          .left{
            text-align: left;
          }
          .center{
            text-align: center;
          }
          .right{
            text-align: right;
          }
        }
      }
    }
  }
}
</style>